<template>
  <div>
    <div class="margin-container-list">
      <!-- 内容列表 -->
      <div class="table-container">
        <el-table  ref="multipleTable" :data="orderList" v-loading="listLoading"
                   element-loading-text="加载中" style="width: 100%" >
          <el-table-column width="350px" label="订单编号" prop="orderNo"></el-table-column>
          <el-table-column width="135px" label="收货人" prop="customerNickname"></el-table-column>
          <el-table-column width="135px" label="零售金额" prop="orderPrice"></el-table-column>
          <el-table-column width="135px" label="分销金额" prop="enterpriseIncome"></el-table-column>
          <el-table-column width="135px" label="佣金金额" prop="memberCommission"></el-table-column>
          <el-table-column width="135px" label="实付金额" prop="actualPrice"></el-table-column>
          <el-table-column width="200px" label="订单状态">
            <template slot-scope="scope">
              <template>
                {{ dict.orderStatus[scope.row.orderStatus]}}
              </template>
            </template>
          </el-table-column>
          <el-table-column width="135px" label="支付时间" prop="salesNum"></el-table-column>
          <el-table-column min-width="260px" label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="showDetail(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="searchListQuery.currentPage"
                       :page-sizes="[10, 20, 50, 100]" :page-size="searchListQuery.size"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>

</style>

<script>
  import { pageProjectOrder } from '@/api/goods/order'
  import { listExpress } from '@/api/common/common'
  import elDragDialog from '@/directive/el-dragDialog'

  export default {
    directives: {
      // 拖动窗口
      elDragDialog
    },
    props: {
      memberId: {
        type: String
      }
    },
    data() {
      return {
        total: 0,
        listLoading: true,
        searchListQuery: {
          enterpriseId: this.getEnterpriseId(),
          memberId: this.memberId,
          currentPage: 1,
          size: 10
        },
        dict: {
        },
        orderList: [],
        expressList: []
      }
    },
    // 初始化页面
    created() {
      listExpress().then(response => {
        if (response.isError) {
          return
        }
        this.expressList = response.data
      })
      this.init()
    },
    filters: {
      dateFilter(e) {
        return e
      }
    },
    mounted() {
    },
    methods: {
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.init()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.init()
      },
      init() {
        // 搜索状态
        this.searchListQuery.enterpriseId = this.getEnterpriseId()
        this.searchListQuery.memberId = this.memberId
        pageProjectOrder(this.searchListQuery).then(response => {
          if (response.isError) {
            return
          }
          this.total = response.data.total
          this.orderList = response.data.records
          this.dict = response.data.dict
          this.listLoading = false
        })
      },
      showDetail(row) {
        this.$router.push({ path: '/order/order/detail/index', query: { orderId: row.orderId }})
      }
    }
  }

</script>
